import React from "react";
import styled from "@emotion/styled";

interface RadioOption {
  label: string;
  value: string | number;
  disabled?: boolean;
}

interface RadioGroupProps {
  options: RadioOption[];
  value?: string | number;
  onChange?: (value: string | number) => void;
  name?: string;
  disabled?: boolean;
  direction?: "horizontal" | "vertical";
  className?: string;
}

interface RadioProps {
  label: string;
  value: string | number;
  checked?: boolean;
  disabled?: boolean;
  onChange?: (value: string | number) => void;
  name?: string;
  className?: string;
}

export type { RadioOption, RadioGroupProps, RadioProps };

const RadioContainer = styled.label<{ disabled?: boolean }>`
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
  user-select: none;
  position: relative;
  padding: 0.25rem 0;
  min-height: 44px; /* 触摸目标最小尺寸 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  @media (max-width: 768px) {
    min-height: 36px;
    gap: 0.625rem;
    padding: 0.125rem 0;
  }

  &:hover {
    .radio-circle {
      border-color: ${(props) =>
        !props.disabled && "var(--accent-color, #3b82f6)"};
    }
  }
`;

const HiddenRadio = styled.input`
  position: absolute;
  opacity: 0;
  pointer-events: none;
`;

const RadioCircle = styled.div<{ checked?: boolean; disabled?: boolean }>`
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid
    ${(props) =>
      props.checked
        ? "var(--accent-color, #3b82f6)"
        : "var(--border-color, #d1d5db)"};
  background: var(--bg-primary, #ffffff);
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 18px;
    height: 18px;
  }

  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
      scale(${(props) => (props.checked ? 1 : 0)});
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color, #3b82f6);
    transition: transform 0.2s ease;
  }
`;

const RadioLabel = styled.span`
  font-size: 0.9rem;
  color: var(--text-primary, #1f2937);
  line-height: 1.5;
`;

const RadioGroupContainer = styled.div<{
  direction?: "horizontal" | "vertical";
}>`
  display: flex;
  flex-direction: ${(props) =>
    props.direction === "vertical" ? "column" : "row"};
  gap: ${(props) => (props.direction === "vertical" ? "0.75rem" : "1.5rem")};
  flex-wrap: wrap;
`;

export const Radio: React.FC<RadioProps> = ({
  label,
  value,
  checked = false,
  disabled = false,
  onChange,
  name,
  className,
}) => {
  const handleChange = (e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡
    if (!disabled && onChange) {
      onChange(value);
    }
  };

  return (
    <RadioContainer
      disabled={disabled}
      className={className}
      onClick={handleChange}
    >
      <HiddenRadio
        type="radio"
        name={name}
        value={value}
        checked={checked}
        disabled={disabled}
        readOnly
      />
      <RadioCircle
        className="radio-circle"
        checked={checked}
        disabled={disabled}
      />
      <RadioLabel>{label}</RadioLabel>
    </RadioContainer>
  );
};

export const RadioGroup: React.FC<RadioGroupProps> = ({
  options,
  value,
  onChange,
  name,
  disabled = false,
  direction = "horizontal",
  className,
}) => {
  const handleChange = (optionValue: string | number) => {
    if (!disabled && onChange) {
      onChange(optionValue);
    }
  };

  return (
    <RadioGroupContainer direction={direction} className={className}>
      {options.map((option) => (
        <Radio
          key={option.value}
          label={option.label}
          value={option.value}
          checked={value === option.value}
          disabled={disabled || option.disabled}
          onChange={handleChange}
          name={name}
        />
      ))}
    </RadioGroupContainer>
  );
};

export default RadioGroup;
